<!-- 首页 -->
<template>
  <view>
    <!-- <view class="launch-page">
      顶部内容区域
      <view class="top-content">
        应用图标
        <view class="app-icon">
          <I-Images
            :src="state.src"
            lazyLoad
            :mode="aspectFill"
            showLoading
            showError
            width="120px"
            height="89px"
            fade
          >
          </I-Images>
        </view>

        应用名称
        <text class="app-name">电十八</text>
        <text class="percentage">多.快.好.省</text>
        标语

        <u-line style="margin: 10rpx"></u-line>

        <text class="slogan">电力物资一站式购销平台</text>
        <text class="slogan">电力工程资源整合平台</text>
        <text class="slogan">中国电力抱团出海联盟</text>

      </view>
    </view> -->
    <view class="launch-page">
      <view class="top-content">
        <view class="app-icon">
          <I-Images
            :src="state.src"
            lazyLoad
            :mode="aspectFill"
            showLoading
            showError
            width="180px"
            height="100px"
            fade
          >
          </I-Images>
        </view>

        <u-line style="margin: 10rpx"></u-line>
        <view style="text-align: center">
          <view class="slogan" style="padding-top: 10px"
            >电力工程资源整合平台</view
          >
          <view class="slogan">电力物资一站式购销平台</view>
          <view class="slogan">中国电力产业抱团出海联盟</view>
        </view>
      </view>
    </view>
    <view
      class="launch-page"
      style="
        display: block !important;
        top: 50% !important;
        width: 85% !important;
        padding: 10px;
      "
    >
      <view>
        <view>
          <template>
            <div class="search-container">
              <u-search
                class="custom-search"
                placeholder="搜商机"
                shape="round"
                v-model="state.search"
                @search="handleSearch"
                :showAction="false"
              >
                <template #right>
                  <span class="search-button" @click="search">搜商机</span>
                </template>
              </u-search>
            </div>
          </template>
        </view>
        <!-- <view style="margin-bottom: 20px; font-size: 18px; font-weight: bold">
          搜一搜
        </view>
        <view
          style="
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: flex-start !important;
            gap: 10px !important;
          "
        >
          <view
            v-for="(item, index) in state.searchList"
            :key="index"
            style="
              width: calc((100% - 10px) / 2) !important;
              min-width: 0 !important;
              box-sizing: border-box !important;
              padding: 10px;
              background-color: rgb(82 79 79 / 15%);
              border-radius: 5px;
            "
          >
            <view
              style="
                white-space: nowrap !important;
                overflow: hidden !important;
                text-overflow: ellipsis !important;
              "
              >{{ item.title }}</view
            >
          </view>
        </view> -->
      </view>
    </view>

    <view>
      <!-- <view class="decorative-dots" style="bottom: -200px">
        <view style="display: flex">
          <view>国内市场业务拓展联盟报名</view>
          <view>全球市场业务拓展联盟报名</view>
        </view>
      </view> -->
      <view style="position: absolute; bottom: 150px; width: 100%">
        <view class="dots-container">
          <view class="dots-item" @click="ClickExpand(1)"
            >国内市场业务拓展联盟报名
            <view style="display: flex; margin-top: 16rpx">
              <u-icon name="arrow-right" color="#4e5969" size="9"></u-icon
              ><u-icon name="arrow-right" color="#4e5969" size="9"></u-icon
              ><u-icon name="arrow-right" color="#4e5969" size="9"></u-icon>
            </view>
          </view>
          <view class="dots-item" @click="ClickExpand(2)"
            >全球市场业务拓展联盟报名
            <view style="display: flex; margin-top: 16rpx">
              <u-icon name="arrow-right" color="#4e5969" size="9"></u-icon
              ><u-icon name="arrow-right" color="#4e5969" size="9"></u-icon
              ><u-icon name="arrow-right" color="#4e5969" size="9"></u-icon>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部装饰圆点 -->
      <view class="decorative-dots">
        <view class="dot dot-blue"></view>
        <view class="dot dot-green"></view>
        <view class="dot dot-purple"></view>
        <view class="dot dot-yellow"></view>
        <view class="dot dot-pink"></view>
      </view>

      <view>
        <Tabbar :index="0"></Tabbar>
      </view>
      <u-popup
        :show="on_of"
        :round="10"
        mode="center"
        :closeable="true"
        @close="on_ofClose"
        :closeOnClickOverlay="false"
        :customStyle="{
          padding: '15px',
          margin: '0 20px',
        }"
      >
        <view>
          <u-swiper
            :list="dataSwiper"
            keyName="image"
            showTitle
            :autoplay="true"
            :interval="3000"
            :duration="500"
            height="55vh"
            circular
            @click="clickWwiper"
          ></u-swiper>
        </view>
        <view class="onOfX" @click="on_ofClose(1)">
          <view class="x">
            <u-button text="知道了" type="success" color="#2979ff"></u-button>
          </view>
          <u-checkbox-group
            v-model="state.checkboxValue1"
            placement="column"
            @change="checkboxChange"
          >
            <u-checkbox
              :customStyle="{ marginBottom: '8px' }"
              label="今天不再提醒"
              :disabled="isDisabled"
              name="1"
            >
            </u-checkbox>
          </u-checkbox-group>
        </view>
      </u-popup>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted, toRefs, reactive } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { getBanner } from "@/api/userInfo.js";
import { showToast } from "../../utils/toast";
import { PutSaveParent, getLoginInfo } from "../../api/userInfo";
const on_of = ref(false);
const state = reactive({
  src: "/static/logo.gif",
  dataSwiper: [],
  checkboxValue1: [],
  searchList: [
    { icon: "", title: "搜物资", index: 1 },
    { icon: "", title: "搜劳务", index: 1 },
    { icon: "", title: "搜工程公司", index: 1 },
    { icon: "", title: "搜设计", index: 1 },
    { icon: "", title: "搜监理", index: 1 },
    { icon: "", title: "搜人脉", index: 1 },
    { icon: "", title: "搜咨询", index: 1 },
    { icon: "", title: "搜招采公告", index: 1 },
  ],
  isChecked: false,
  search: "",
});
const { dataSwiper } = toRefs(state);
// 检查是否应该显示弹窗
const checkPopupStatus = async () => {
  if (dataSwiper.value.length === 0) {
    on_of.value = false;
    return;
  }
  try {
    const res = await uni.getStorage({ key: "popupClosedTime" });
    const closedTime = res.data;
    if (closedTime) {
      const now = new Date().getTime();
      const twentyFourHours = 24 * 60 * 60 * 1000;
      // const twentyFourHours = 60 * 10;
      // 如果未超过24小时则不显示1
      on_of.value = now - closedTime >= twentyFourHours;
    } else {
      // 如果没有记录则显示
      on_of.value = true;
    }
  } catch (e) {
    // 如果没有存储记录，也显示弹窗
    on_of.value = true;
  }
};
onLoad(async (e) => {
  if (e.q) {
    let vId = decodeURIComponent(e.q);
    // const s = "https://www.dian18.cn/share_code?share_code=12345";
    // let shareCode = s.split("=").pop();
    let _vcId = vId.split("=")[1];
    console.log("id：" + _vcId);
    if (_vcId) {
      // 存储到本地缓存
      uni.setStorageSync("share_code", _vcId);
      try {
        const res = await PutSaveParent({ share_code: _vcId });
        if (res.code == 10000) {
          uni.navigateTo({
            url: "/pages/user/xieyi",
          });
        }
      } catch (error) {}
      // 跳转页面
    }
  }
  const token = uni.getStorageSync("token");
  if (token) {
    await getuserinfo();
  }
});

const getuserinfo = async () => {
  const res = await getLoginInfo();
  uni.setStorage({
    key: "userinfo",
    data: res.data,
  });
};
onShow(async () => {
  await init();
  await checkPopupStatus();
});

const init = async () => {
  try {
    const res = await getBanner("2");
    // console.log(res);
    dataSwiper.value = res.data.map((item) => ({
      image: item.img_show,
      id: item.id,
      title: item.title,
      type: "image",
    }));
    // console.log(dataSwiper.value);
  } catch (error) {}
};
const search = async () => {
  uni.navigateTo({
    url: `/pages/index/search?title=${state.search}`,
  });
  state.search = "";
};
// 关闭弹窗时记录时间
const on_ofClose = (e) => {
  console.log(e);

  if (e == 1 && state.isChecked) {
    on_of.value = false;
    uni.setStorage({
      key: "popupClosedTime",
      data: new Date().getTime(),
    });
  } else {
    uni.removeStorage({
      key: "popupClosedTime",
      success: function () {
        console.log("popupClosedTime 已清除");
      },
      fail: function (err) {
        console.log("清除失败:", err);
      },
    });
    on_of.value = false;
  }

  // 存储当前关闭时间戳
  // uni.setStorage({
  //   key: "popupClosedTime",
  //   data: new Date().getTime(),
  // });
};

const checkboxChange = (e) => {
  // 勾选状态更新
  state.isChecked = e.length > 0;
};
const ClickExpand = (e) => {
  uni.navigateTo({
    url: `/pages_index/expand/index?id=${e}`,
  });
};
</script>
<style lang="scss" scoped>
.launch-page {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, 0%);
  // width: 200px;
  width: 100%;
  // height: 100px;
  display: flex;
  // justify-content: space-around;
  justify-content: center;
  text-align: center;
  .app-icon {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
  }
}
:deep(.u-popup__content) {
  width: 100% !important;
}
.onOfX {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 主轴（垂直）居中 */
  align-items: center; /* 交叉轴（水平）居中 */
  text-align: center; /* 内部文本居中（备用） */
  width: 100%;
  .x {
    // border: 1px solid black;
    padding: 5px;
    color: black;
    border-radius: 50%;
    margin: 10px 0;
  }
}
:deep(.u-popup__content__close) {
  top: -10px !important;
  right: -5px !important;
}
:deep(.u-popup__content__close .u-icon__icon) {
  color: black !important;
  border: 1px solid black;
  padding: 3px;
  border-radius: 50%;
}
:deep(.u-popup .u-safe-bottom) {
  display: none !important;
}

.slogan {
  font-size: 35rpx;
  // color: #aaaaaa;
  color: #6b6969;
  margin-bottom: 15rpx;
}
.decorative-dots {
  position: absolute;
  bottom: 100rpx;
  width: 100%;
  height: 40%;
  z-index: -25;

  .dot {
    position: absolute;
    border-radius: 50%;
    opacity: 0.3;

    /* 不同颜色的圆点 */
    &-blue {
      width: 200rpx;
      height: 200rpx;
      background: linear-gradient(135deg, #ff3755, #c59a9b);
      bottom: -50rpx;
      left: 10%;
    }

    &-green {
      width: 150rpx;
      height: 150rpx;
      background: linear-gradient(135deg, #3baa4e, #e3ffe2);
      bottom: 20%;
      right: 15%;
    }

    &-purple {
      width: 180rpx;
      height: 180rpx;
      background: linear-gradient(135deg, #c644fc, #5856d6);
      bottom: 10%;
      left: 25%;
    }

    &-yellow {
      width: 120rpx;
      height: 120rpx;
      background: linear-gradient(135deg, #ffcc00, #ff9500);
      bottom: 30%;
      right: 25%;
    }

    &-pink {
      width: 100rpx;
      height: 100rpx;
      background: linear-gradient(135deg, #ff5e62, #ff2d55);
      bottom: 5%;
      right: 5%;
    }
  }
}

.search-container {
  padding: 12rpx 16px;
  background: #f8f8f8;
  border-radius: 8px;
}

.custom-search {
  --u-search-input-background: #fff;
  --u-search-input-border-radius: 24px; /* 更大的圆角 */
  --u-search-input-height: 44px;
  --u-search-input-padding: 0 16px;
  --u-search-input-border: 1px solid #e0e0e0;
}

.search-button {
  background: #137ad3;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 5px 16px;
  height: 36px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-button:hover {
  background: #40a9ff;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.search-button:active {
  background: #096dd9;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.dots-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 居中显示 */
  gap: 16rpx; /* 缩小间距 */
  padding: 0 20rpx;
  white-space: nowrap; /* 强制不换行 */
}

.dots-item {
  font-size: 28rpx; /* 缩小文字 */
  text-decoration: underline;
  display: flex;
  // font-weight: bold;
  color: #4e5969;
  align-items: baseline;
  align-content: center;
  padding: 6rpx 10rpx;
  border-radius: 14rpx;
  transition: all 0.3s ease;
  cursor: pointer;
  letter-spacing: 0.5rpx; /* 微调字间距 */
}

.dots-item:hover {
  background-color: #eef1f5;
  color: #1d2129;
  transform: translateY(-1rpx);
}
</style>
